<!DOCTYPE html>
<html>
<head>
    <title>Mass-Volume Graph</title>
</head>
<body>
<canvas id="myCanvas" width="550" height="550"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Define drawing parameters
    const originX = 60;
    const originY = 490;
    const scale = 80;
    const gridWidth = 5 * scale;
    const gridHeight = 5 * scale;

    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1;
    ctx.font = '20px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Draw grid lines
    for (let i = 1; i <= 5; i++) {
        // Vertical grid lines
        ctx.beginPath();
        ctx.moveTo(originX + i * scale, originY);
        ctx.lineTo(originX + i * scale, originY - gridHeight);
        ctx.stroke();

        // Horizontal grid lines
        ctx.beginPath();
        ctx.moveTo(originX, originY - i * scale);
        ctx.lineTo(originX + gridWidth, originY - i * scale);
        ctx.stroke();
    }

    // Draw axes
    ctx.lineWidth = 2;

    // Y-axis
    ctx.beginPath();
    ctx.moveTo(originX, originY);
    ctx.lineTo(originX, originY - gridHeight - 30);
    ctx.stroke();
    // Y-axis arrow
    ctx.beginPath();
    ctx.moveTo(originX - 5, originY - gridHeight - 25);
    ctx.lineTo(originX, originY - gridHeight - 35);
    ctx.lineTo(originX + 5, originY - gridHeight - 25);
    ctx.stroke();

    // X-axis
    ctx.beginPath();
    ctx.moveTo(originX, originY);
    ctx.lineTo(originX + gridWidth + 30, originY);
    ctx.stroke();
    // X-axis arrow
    ctx.beginPath();
    ctx.moveTo(originX + gridWidth + 25, originY - 5);
    ctx.lineTo(originX + gridWidth + 35, originY);
    ctx.lineTo(originX + gridWidth + 25, originY + 5);
    ctx.stroke();

    // Draw axis labels and ticks
    ctx.lineWidth = 1;
    ctx.font = '20px Times New Roman';

    // Y-axis labels and ticks
    for (let i = 0; i <= 5; i++) {
        ctx.fillText(i, originX - 25, originY - i * scale);
    }
    ctx.save();
    ctx.translate(originX - 45, originY - gridHeight - 10);
    ctx.fillText('m/g', 0, 0);
    ctx.restore();


    // X-axis labels and ticks
    for (let i = 0; i <= 5; i++) {
        if (i > 0) {
            ctx.fillText(i, originX + i * scale, originY + 20);
        }
    }
    ctx.fillText('V/cm³', originX + gridWidth + 10, originY + 30);

    // Draw data lines
    ctx.lineWidth = 2;

    // Line 甲 (Jia)
    ctx.beginPath();
    ctx.moveTo(originX, originY);
    ctx.lineTo(originX + 5 * scale, originY - 5 * scale);
    ctx.stroke();

    // Line 乙 (Yi)
    ctx.beginPath();
    ctx.moveTo(originX, originY);
    ctx.lineTo(originX + 5 * scale, originY - 4 * scale);
    ctx.stroke();

    // Add line labels
    ctx.font = '24px "KaiTi", "SimSun", sans-serif';
    ctx.fillText('甲', originX + 5 * scale + 20, originY - 5 * scale);
    ctx.fillText('乙', originX + 5 * scale + 20, originY - 4 * scale + 10);

</script>
</body>
</html>